Hi Dai Gei Ho~ 我是Winnie～ 今天是第八天，中秋連假到數結束第二天～

在開始說明今天主題之前，請大家回憶一下，當我們在local開發時，先不論是使用的工具是 Vite 還是 webpack，今天即時修改了一段程式碼，有沒有想過為什麼頁面可以不用刷新也可以跟著修改的內容一起改變呢？

兵蹦～對！答案就是與HMR有關～ 也是屬於Vite核心背後之一。

什麼是 HMR？

HMR熱更新 全意為 Hot Module Replacement，簡單來說 就是在 Server與 瀏覽器 建立了一個 websocket連線，當程式碼被修改時，Server會傳送訊息通知 瀏覽器 去請求修改模組的程式碼，完成熱更新，所以在這樣的情況下就能在不刷新瀏覽器的前提下進行更新。

而總結以上，相較與 live load，HMR具有以下優點：

• 修改程式碼時，可以即時更新畫面
• 實現部分跟新，避免多餘請求
• 保有原本狀態

而在 Vite 的 HMR 中 運作主要會有4個流程：

1. 啟動 koa server，使用chokidar 對檔案進行監聽，針對更動可對不同模組進行相應處理
2. 建立一個websocket服務器 與 ws client文件，並在html中引入，載入ws client文件
3. 當 server 監聽到 檔案變化，發送websocket訊息 通知 瀏覽器
4. 當 瀏覽器接受到訊息，可以根據內容 決定 要刷新頁面 還是 更新變化檔案，同時執行相關檔案 注入ws client時設置的hmr hook函數

相關補充：

koa 是什麼?
koa 是一個基於 node 實現的一個新的web框架，由express框架的原班人馬打造的。它的特點是優雅、簡潔、表達力強、自由度高。與express相比，是一個更輕量的node框架
websocket 是什麼?
WebSocket 是一種網路協定， 客戶端 可以透過此協定與 伺服器端 做溝通， 且只需透過一次連結便能保持連線，不必再透過一直發送 請求 來與 伺服器端 互動
chokidar 是什麼?
chokidar 是封裝 Node.js 監控文件系統文件變化功能的套件

以上 是今天的關於 HMR 介紹(抱歉，有一點簡略，因為有一點不太熟，希望之後更理解原始碼，再將這篇補齊)，謝謝大家的閱讀，如有問題歡迎給予指教，謝謝。

ps 如想再更詳細了解 Vite HMR源碼解釋 推薦大家可以先閱讀此篇 从零到一，带你彻底搞懂 vite 中的 HMR 原理（源码分析）